<template>
  <div>
    <business-table :businessTableData="businessTableData"/>
  </div>
</template>

<script>
export default {
  components: {},
  props: [],
  data() {
    return {
      businessTableData: {
        //需要显示组件
        componentType: {
          title: true,//CommonTitle 组件是否显示
          tabs: true,//CommonTabs 组件是否显示
          table: true,//CommonTable 组件是否显示
          dialog: true,//CommonDialog 组件是否显示
        },
        //组件需要的接口和初始化方法名
        interfaceName:{
          init:'adminPage',//初始化接口名称
          initMethodName:'businessTableInitData',//初始化方法名 默认初始化名称
          add:'adminPut',//新增接口名称
          edit:'adminPost',//修改接口名称
          del:'adminDel',//删除接口
          status:'adminPutStatus',//修改状态名称
          oneData:'adminGet',//读取一条接口名称
        },
        //CommonTitle组件数据
        titleProp: {
          name: '角色管理',//标题名称
          class: '',//class名称
          operate: [{ //按钮集合
            show: true,//是否显示
            name: '添加角色',//按钮名称
            type: 'primary',//按钮颜色 primary success info warning danger text
            icon: 'el-icon-plus', //图标
            plain: false,// 是否朴素按钮 false 否 true 是
            round: false, // 是否圆角 false 否 true 是
            method: 'addTitleClick', //按钮方法  业务组件方法名固定
            id: 20000,//权限 20000 默认显示
          }]
        },

        //CommonTabs组件数据
        tabsProp: {
          active: '1',//默认打开是什么状态 如未审核，已审核，全部的话是20000
          class: '',//class名称
          keywords: '',//搜索的值
          stretch: false,//标签的宽度是否自撑开 是 true 否 false
          tabsClick: 'tabsClick', //点击tabs方法名
          searchClick: 'tabsClick',// 搜索方法名 业务组件方法名固定
          heightSearchClick: 'tabsClick',//高级搜索点击确定 业务组件方法名固定
          inputShow: false,//搜索框是否显示 true 是 false 否
          heightShow: false,//是否有高级搜索 true 是 false 否
          heightSelectShow: false,//高级搜索是否默认下拉出来 true 是 false 否
          tabsSwitchField: 'status',//切换状态字段
          //tabs 标题
          tabsTitleProp: [{
            show: true,
            label: '已启动', //名称
            name: '1',//状态 全部是20000
            total: 0, //总数
          }, {
            show: true,
            label: '关闭', //名称
            name: '0',//状态 全部是20000
            total: 0, //总数
          }],


          //高级搜索字段
          heightSearchProp: [
            {
              show: true,//是否显示 true 显示，false 不显示
              name: '输入框',//名称
              field: 'a1',//字段名
              disabled: false,//是否不能输入 true 不可以输入 false 可以输入
              changeMethod: 'aa',//方法名
              type: 'input',//数据类型
              width: '',//长度

            }, {
              show: true,//是否显示 true 显示，false 不显示
              name: '输入框json',//名称
              field: 'a11',//字段名
              disabled: false,//是否不能输入 true 不可以输入 false 可以输入
              changeMethod: 'aa',//方法名
              type: 'inputJson',//数据类型
              jsonName: 'name',
              width: '',//长度

            }, {
              show: true,//是否显示 true 显示，false 不显示
              name: '文本域',//名称
              field: 'a2',//字段名
              disabled: false,//是否不能输入 true 不可以输入 false 可以输入
              changeMethod: '',//方法名
              type: 'textarea',//数据类型
              width: '',//长度
              minRows: '2', //最小几行
              maxRows: '40',//最多几行
            }, {
              show: true,//是否显示 true 显示，false 不显示
              name: '单选框',//名称
              field: 'a3',//字段名
              disabled: false,//是否不能输入 true 不可以输入 false 可以输入
              changeMethod: '',//方法名
              type: 'radio',//数据类型
              prop: [ //选择的值
                {
                  label: '选项1',
                  value: '1'
                }, {
                  label: '选项2',
                  value: '2'
                }
              ]
            }, {
              show: true,//是否显示 true 显示，false 不显示
              name: '多选框',//名称
              field: 'a4',//字段名
              disabled: false,//是否不能输入 true 不可以输入 false 可以输入
              changeMethod: '',//方法名
              type: 'checkbox',//数据类型
              prop: [ //选择的值
                {
                  label: '选项1',
                  value: '1'
                }, {
                  label: '选项2',
                  value: '2'
                }
              ]
            }, {
              show: true,//是否显示 true 显示，false 不显示
              name: '下拉框',//名称
              field: 'a5',//字段名
              disabled: false,//是否不能输入 true 不可以输入 false 可以输入
              changeMethod: '',//方法名
              type: 'select',//数据类型
              width: '',//长度
              prop: [ //选择的值
                {
                  label: '选项1',
                  value: '1'
                }, {
                  label: '选项2',
                  value: '2'
                }
              ]
            }, {
              show: true,//是否显示 true 显示，false 不显示
              name: '二个时间选择器',//名称
              field: 'a6',//字段名
              disabled: false,//是否不能输入 true 不可以输入 false 可以输入
              changeMethod: '',//方法名
              type: 'date',//数据类型
              width: '215',//长度
              dataType: 'daterange'//时间格式 可以是year/month/date/dates/ week/datetime/datetimerange/ daterange/monthrange
            }, {
              show: true,//是否显示 true 显示，false 不显示
              name: '一个时间选择器',//名称
              field: 'a7',//字段名
              disabled: false,//是否不能输入 true 不可以输入 false 可以输入
              changeMethod: '',//方法名
              type: 'oneDate',//数据类型
              width: '',//长度
              oneDataType: 'date'//时间格式 可以是year/month/date/dates/ week/datetime/datetimerange/ daterange/monthrange
            }
          ],
          //高级搜索的值
          heightSearchData: {
            a1: '1',
            a2: '2',
            a3: '1',
            a4: ['1'],
            a5: '2',
            a6: '',
            a7: '',
            name: {a11: 123},
            b3:{
              a11:123,
              a22:[1,2,3,'123'],
              a33:{
                a333:123123,
                a444:[222]
              }
            },
            b1:true,
            b2:123,


          }
        },

        //CommonTable组件数据
        tableProp: {
          loading: false,//加载中 true  加载完成false
          class: '',//表格顶部div class
          index: true,//是否需要有序号
          selection: false,//是否是多选框
          selectionVal: 'id',// 开启多选获取的字段
          selectionId: [],// 开启多选后，选择哪几条
          isPage: true, //是否分页
          current_page: 1,//单前第几页
          pageSize: 30,//一页数量
          pageMethod: 'tablePageClick',//分页方法
          pageTotal: 10,//分页总数
          statusName: 'status',//状态字段名 已启动未启动等状态按钮显示还是隐藏
          //字段配置
          tableListProp: [
            {
              show: true,//是否显示 true 显示 false 不显示
              title: '账号',//表头
              field: 'account',//字段
              isWidth: false,//是否是固定长度 true 是 false 否
              width: '180',//长度
              headerAlign: 'center',//表头居中
              align: 'center',//内容居中
              tooltip: true,//是否超长tip
              class: '',//表格class
              type: 'chineseCharacters',
            }, {
              show: true,//是否显示 true 显示 false 不显示
              title: '角色',//表头
              field: 'group_name',//字段
              isWidth: false,//是否是固定长度 true 是 false 否
              width: '150px',//长度
              headerAlign: 'center',//表头居中
              align: 'center',//内容居中
              tooltip: true,//是否超长tip
              class: '',//表格class
              type: 'chineseCharactersJson',
              jsonName: 'admin_group',//是json里面的字段
            }, {
              show: true,//是否显示 true 显示 false 不显示
              title: '创建时间',//表头
              field: 'created_at',//字段
              isWidth: false,//是否是固定长度 true 是 false 否
              width: '150',//长度
              headerAlign: 'center',//表头居中
              align: 'center',//内容居中
              tooltip: true,//是否超长tip
              class: '',//表格class
              type: 'timeStamp',
              jsonName: '',//是json里面的字段
              timeType: false,//显示时间是否到时分秒 true 是 false 没有时分秒就一个日期
            }, {
              show: true,//是否显示 true 显示 false 不显示
              title: '头像',//表头
              field: 'avatarUrl',//字段
              isWidth: false,//是否是固定长度 true 是 false 否
              width: '150px',//长度
              headerAlign: 'center',//表头居中
              align: 'center',//内容居中
              tooltip: true,//是否超长tip
              class: '',//表格class
              type: 'images',
              urlType: 'pc_url',//使用那种格式的图片 mobile_url:手机图片 pc_url:pc图片 url:原生大小
              jsonName: '',//是json里面的字段
              imageWidth: '60',//图片多度
              imageHeight: '',//图片高度
            }, {
              show: true,//是否显示 true 显示 false 不显示
              title: '操作',//表头
              headerAlign: 'center',//表头居中
              align: 'center',//内容居中
              isWidth: true,//是否是固定长度 true 是 false 否
              width: '280',//长度
              tooltip: false,//是否超长tip
              class: '',//表格class
              type: 'operation',
            }
          ],
          //操作按钮配置
          operate: [
            { //按钮集合
              name: '编辑',//按钮名称
              type: 'warning',//按钮颜色 primary success info warning danger text
              icon: 'el-icon-edit', //图标
              plain: false,// 是否朴素按钮 false 否 true 是
              round: false, // 是否圆角 false 否 true 是
              method: 'tableEditClick', //按钮方法 方法名后面自动会加上xxxClick
              id: "20000",//权限 20000 默认显示
              status: '20000',//状态值
            }, {
              name: '关闭',//按钮名称
              type: 'primary',//按钮颜色 primary success info warning danger text
              icon: 'el-icon-close', //图标
              plain: false,// 是否朴素按钮 false 否 true 是
              round: false, // 是否圆角 false 否 true 是
              method: 'tableStatusClick', //按钮方法 方法名后面自动会加上xxxClick
              id: "20000",//权限 20000 默认显示
              status: '1',//状态值
            }, {
              name: '启动',//按钮名称
              type: 'primary',//按钮颜色 primary success info warning danger text
              icon: 'el-icon-check', //图标
              plain: false,// 是否朴素按钮 false 否 true 是
              round: false, // 是否圆角 false 否 true 是
              method: 'tableStatusClick', //按钮方法 方法名后面自动会加上xxxClick
              id: "20000",//权限 20000 默认显示
              status: '0',//状态值
            }, {
              name: '删除',//按钮名称
              type: 'danger',//按钮颜色 primary success info warning danger text
              icon: 'el-icon-delete', //图标
              plain: false,// 是否朴素按钮 false 否 true 是
              round: false, // 是否圆角 false 否 true 是
              method: 'tableDelClick', //按钮方法 方法名后面自动会加上xxxClick
              id: "20000",//权限 20000 默认显示
              status: '20000',//状态值
            }],
          //table 数据
          tableData: [],
        },

        //CommonDialog组件数据
        dialogProp: { //设置组件属性
          isDialog: false,//dialog 默认是否显示 true 是 false 否
          loading: false,//加载圈圈
          dialogTitle: '编辑',//dialog标题co
          dialogTop: '15vh',//dialog 头部距离
          dialogWidth: '600px',//dialog 长度
          formRef: 'ruleForm',//ref名称
          formLabelWidth: "120",//label 长度
          formClass: '',//添加的class 多个用空格隔开
          //表单配置
          formListProp: [
            {
              show: true,//是否显示 true 显示 false 不显示
              label: '头像',//名称
              field: 'avatarUrl',//字段
              itemClass: '',//这行的class
              width: '',//长度
              rules: [],
              type: 'uploadImg',//数据类型
              accept: '.png,.jpg',//可上传文件格式,用,号隔开 .png,.jpg
              isAll: false,//是否多图上传 true 是 false 否
              urlType: 'pc_url',//使用那种格式的图片 mobile_url:手机图片 pc_url:pc图片 url:原生大小
              size: '2',//最大上传几MB的图片
            }, {
              show: true,//是否显示 true 显示，false 不显示
              label: '账号',//名称
              field: 'account',//字段名
              itemClass: '',//这行的class
              width: '',// 输入框等长度
              disabled: false,//是否不能输入 true 不可以输入 false 可以输入
              rules: [{required: true, message: `请输入账号`, trigger: 'blur'}],
              changeMethod: '',//方法名
              type: 'input',//数据类型
            }, {
              show: true,//是否显示 true 显示，false 不显示
              label: '手机号码',//名称
              field: 'mobile',//字段名
              itemClass: '',//这行的class
              width: '',// 输入框等长度
              disabled: false,//是否不能输入 true 不可以输入 false 可以输入
              rules: [{required: true, message: `请输入手机号码`, trigger: 'blur'}],
              changeMethod: '',//方法名
              type: 'input',//数据类型
            }, {
              show: true,//是否显示 true 显示，false 不显示
              label: '选择角色',//名称
              field: 'group_id',//字段名
              itemClass: '',//这行的class
              disabled: false,//是否不能输入 true 不可以输入 false 可以输入
              width: '',//长度
              changeMethod: '',//方法名
              rules: [{required: true, message: `请输入电话号码`, trigger: 'blur'}],
              type: 'select',//数据类型
              filterable:false,//是否可输入搜索 false不可以 true可以
              prop: [ //选择的值
                {
                  label: '选项1',
                  value: '1'
                }, {
                  label: '选项2',
                  value: '2'
                }
              ]
            }, {
              show: true,//是否显示 true 显示，false 不显示
              label: '初始化密码',//名称
              field: 'init_password',//字段名
              itemClass: '',//这行的class
              width: '',// 输入框等长度
              disabled: true,//是否不能输入 true 不可以输入 false 可以输入
              rules: [],
              changeMethod: '',//方法名
              type: 'input',//数据类型
            }, {
              show: true,//是否显示 true 显示，false 不显示
              label: '账号状态',//名称
              field: 'status',//字段名
              itemClass: '',//这行的class
              disabled: false,//是否不能输入 true 不可以输入 false 可以输入
              width: '',//长度
              changeMethod: '',//方法名
              rules: [{required: true, message: `请输入角色`, trigger: 'blur'}],
              type: 'radio',//数据类型
              prop: [ //选择的值
                {
                  label: '启动',
                  value: 1
                }, {
                  label: '关闭',
                  value: 0
                }
              ]
            }
          ],
          //按钮配置
          dialogBut: { //dialog 按钮
            class: '',//class
            operate: [{ //按钮集合 取消和确定方法名不要变，自动生成
              name: '取消',//按钮名称
              type: '',//按钮颜色 primary success info warning danger text
              icon: 'el-icon-close', //图标
              plain: true,// 是否朴素按钮 false 否 true 是
              round: false, // 是否圆角 false 否 true 是
              method: 'dialogCancel', //按钮方法
              id: '20000',//权限 20000 默认显示
            }, { //按钮集合
              name: '确定',//按钮名称
              type: 'primary',//按钮颜色 primary success info warning danger text
              icon: 'el-icon-check', //图标
              plain: false,// 是否朴素按钮 false 否 true 是
              round: false, // 是否圆角 false 否 true 是
              method: 'dialogDetermine', //按钮方法
              id: '20000',//权限 20000 默认显示
            }]
          },
          formData: {
            id: '',
            mobile: '',
            avatarUrl: [],//头像上传
            account: '',
            group_id: '',
            init_password: '123456 需要改密码请登录后自行修改',
            status: 1,
          },//修改按钮id不为空 编辑点击确定的时候传过去的值
        },
      }
    };
  },
  mounted() {
    this.initCompetenceList();
  },
  methods: {
    //初始化权限列表
    initCompetenceList() {
      let params = {
        status: 1
      }
      this.$adminGroupList(params).then((result) => {
        this.businessTableData.dialogProp.formListProp[3].prop = result.map(item => ({
          label: item.group_name,
          value: item.id
        }));
      })
    },
    //businessTable组件初始化数据
    businessTableInitData() {
      this.businessTableData.tableProp.loading = true;
      //搜索的字段和值
      //搜索框的值
      let keywordsParams = {}
      if (this.businessTableData.tabsProp.inputShow) {
        keywordsParams.keywords = this.businessTableData.tabsProp.keywords
      }
      //高级搜索的字段和值
      let heightShow = {}
      if (this.businessTableData.tabsProp.heightShow) {
        heightShow = this.businessTableData.tabsProp.heightSearchData
      }
      let params = Object.assign(keywordsParams, heightShow)
      //是否有初始状态
      if (this.businessTableData.tabsProp.tabsSwitchField !== '') {
        params[this.businessTableData.tabsProp.tabsSwitchField] = this.businessTableData.tabsProp.active
      }
      //当前第几页
      params.page = this.businessTableData.tableProp.current_page;
      //处理参数 把array转换成string
      let data = this.HandleUtils.handleParams(params);
      //调用初始化接口
      if(this.businessTableData.interfaceName.init!==''){
        this['$'+this.businessTableData.interfaceName.init](data).then((result) => {
          this.businessTableData.tableProp.current_page = result.current_page;//单前页
          this.businessTableData.tableProp.pageTotal = result.total;//总数
          this.businessTableData.tableProp.pageSize = result.per_page;//每页多少条
          this.businessTableData.tableProp.tableData = result.data;//数据
          this.businessTableData.tableProp.loading = false;
        })
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>
